

$(document).ready(function(){
    var oCir = document.getElementsByTagName("ol");


//----------------------封装一个方法------便捷更新contain---------------------------------------------
//origin:json目录下的创建对象的数据组
//target:对象组生成的父元素      jq对象
//用于切换生成的对象组的tab栏的目标目录      jq对象
//对象组中的alt属性
function creatMod(origin, target,catalog,imgAlt){
    origin.forEach(function(ele,index){
        var temp_ul = document.createElement("ul");
        target.append(temp_ul);
        var temp_a = document.createElement("a");
        catalog.append(temp_a);
        if(index==0){
            temp_ul.className = "active";
            temp_a.className = "sel";
        }
        temp_a.innerText = ele.tip;
        ele.spTab.forEach(function(ele1,index1){
            var temp_li = document.createElement("li");
            $(target).children("ul").eq(index).append(temp_li);
            if(index1==0){
                temp_li.className = "primary";
                temp_li.innerHTML = "<a><img src='"+ele1.imgSrc+"' alt='"+imgAlt+"'></a>"
            }else {
                temp_li.className = "lesser";
                temp_li.innerHTML = "<a><img src='"+ele1.imgSrc+"' alt='"+imgAlt+"'></a><p><a>"+ele1.tabTitle+"</a></p><b>"+ele1.price+"</b>"
            }
        })
    })
    catalog.children("a").on("mouseenter",function(){
        $(this).attr("class","sel").siblings("a").attr("class","");
        target.children("ul").eq($(this).index()-1).attr("class","active").siblings("ul").attr("class","");
    })
}
//----------------------封装一个方法----便捷更新nav-----------------------------------------------
    function currNav(origin, target, imgAlt){
        origin.forEach(function(ele,index){
            var temp_div = document.createElement("div");
            target.append(temp_div);
            temp_div.innerHTML = "<a href='#'><img src='"+ele.imgSrc+"' alt='"+imgAlt+"'></a><p><a href='#'>"+ele.tabTitle+"</a></p><p><em>价格：</em><b>"+ele.price+"</b></p>"
        })
    }



    //动态载入
    var json_data = {
        "url":"../json/mainCont_data.json",
        // "type":"get",
        // "dataType":"json",
        "success":function(data){
            //nav 更新最新

            currNav(data.nav.life,$("#subNav>li").eq(0).find("section.devide"),"life");
            currNav(data.nav.digital,$("#subNav>li").eq(1).find("section.devide"),"life");
            currNav(data.nav.fitness,$("#subNav>li").eq(2).find("section.devide"),"life");
            currNav(data.nav.clothing,$("#subNav>li").eq(3).find("section.devide"),"life");
            currNav(data.nav.beauty,$("#subNav>li").eq(4).find("section.devide"),"life");
            currNav(data.nav.health,$("#subNav>li").eq(5).find("section.devide"),"life");
            currNav(data.nav.treasure,$("#subNav>li").eq(6).find("section.devide"),"life");
            //discount 载入
            data.discount.forEach(function(ele,index){
                var discount_li = document.createElement("li");
                $("#discount>ul").append(discount_li);
                discount_li.innerHTML = "<a><img src='"+ele.imgSrc+"' alt='打折促销'></a>";
                // console.log(ele.ser);
                $(discount_li).children("a")[0].setAttribute("hrefInfor",JSON.stringify(ele));
                // $("#discount>ul>li img")[index].src = ;
            })
 //recom 载入----------------------------------------------------------------------------------------
                //recBanner
            data.recom.recBanner.forEach(function(ele,index){
               var recBanner_li = document.createElement("li");
               $("#recBanner>ul").append(recBanner_li);
                // $(recBanner_li).attr("hre",ele);
                //作死动态创建
               recBanner_li.innerHTML = "<div class='recPic'><a><img src='"+ele.imgSrc+"' alt='风尚推荐'></a></div><p class='recTitle'><a>"+ele.recTitle+"</a></p><b>"+ele.price+"</b><section class='intro'><h4>网站推荐</h4><p>"+ele.intro+"</p></section>"
                recBanner_li.setAttribute("hre",JSON.stringify(ele));
                // console.log(index);
                $("#recBanner div.recPic").eq(index).children("a")[0].setAttribute("hrefInfor",JSON.stringify(ele));
                // $("#recBanner>ul div img")[index].src = ele.imgSrc; //加载图片
                // $("#recBanner>ul>li p>a")[index].innerHTML = ele.recTitle;  //加载title
                // $("#recBanner>ul>li>.intro p")[index].innerText = ele.intro;
            })
            //在载入过后克隆第一个li标签追加到后面，方便轮播效果
            for(var i=0; i< $("#recBanner>ul>li").length; i++){
                var tempLi = document.createElement("li");
                oCir[1].append(tempLi);
            }
            $("#recBanner>ol>li")[0].className = "sel";
            $("#recBanner>ul>li").eq(0).clone(true).appendTo($("#recBanner>ul"));
                //recTag
            data.recom.recTag.forEach(function(ele,index){
                var recTag_li = document.createElement("li");
                $(".recRight>ul").append(recTag_li);
                recTag_li.className = "recTag";
                recTag_li.innerHTML = "<div><a><img src='"+ele.imgSrc+"' alt=''></a></div><p><a>"+ele.recTitle+"</a></p><b>"+ele.price+"</b>"
                // console.log(index);
                $(".recRight>ul>li").eq(index).find("a")[0].setAttribute("hrefInfor",JSON.stringify(ele));
                // console.log(JSON.stringify(ele));
                // $("#recBanner div.recPic").children("a")[0].setAttribute("hrefInfor",JSON.stringify(ele))
                // $(".recRight .recTag>div img")[index].src = ele.imgSrc;
                // $(".recRight .recTag p>a")[index].innerText = ele.recTitle;
                // $(".recRight .recTag b")[index].innerText = ele.price;
            })
//-----------------------------------------------------------------------------------------------------
            //globalSp 加载
            data.globalSp.forEach(function(ele,index){
                ele.globalSp_tab.forEach(function(ele1,index1){
                    var global_li = document.createElement("li");
                    $(".globalSp>.contain>ul").eq(index).append(global_li);
                    if(index1==0){
                        global_li.className = "primary";
                        global_li.innerHTML = "<a><img src='"+ele1.imgSrc+"' alt='全球热销'></a>"
                    }else {
                        global_li.className = "lesser";
                        global_li.innerHTML = "<a><img src='"+ele1.imgSrc+"' alt='全球热销'></a><p><a>"+ele1.gloTitle+"</a></p><b>"+ele1.price+"</b>"
                        // $(".globalSp>.contain>ul").eq(index).children(".lesser").find("img")[index1-1].src = ele1.imgSrc;
                        // $(".globalSp>.contain>ul").eq(index).find("p").children("a")[index1-1].innerText = ele1.gloTitle;
                        // $(".globalSp>.contain>ul").eq(index).find("b")[index1-1].innerText = ele1.price;
                    }
                })
            })
//----------------lifeSp加载-----------------------------------------------------------------------------------
            creatMod(data.lifeSp,$(".lifeSp>.contain"),$(".lifeSp>.secHead"),"生活家居");
            creatMod(data.clothingSp,$(".clothingSp>.contain"),$(".clothingSp>.secHead"),"服饰配件");
            creatMod(data.healthSp,$(".healthSp>.contain"),$(".healthSp>.secHead"),"食品健康");
            creatMod(data.treasureSp,$(".treasureSp>.contain"),$(".treasureSp>.secHead"),"珠宝收藏");
            creatMod(data.beautySp,$(".beautySp>.contain"),$(".beautySp>.secHead"),"珠宝收藏");
            creatMod(data.fitnessSp,$(".fitnessSp>.contain"),$(".fitnessSp>.secHead"),"保健养生");
            creatMod(data.digitalSp,$(".digitalSp>.contain"),$(".digitalSp>.secHead"),"数码家电");

            /*
            *
            * 开始为动态元素绑定跳转界面的相关信息
            *
            *
            *
            *
            * */
            // console.log($("#discount>ul>li>a"));
            // $("#discount>ul>li>a").on("click",function(){
            //     console.log(JSON.parse(this.getAttribute("hrefInfor")).ser_num);
                //var tempdata = JSON.parse(this.getAttribute("hrefInfor")).ser_num;
               // window.location.href = "detail.html?spgoods="+tempdata;
            // })
            $("#discount>ul>li>a").each(function(index,ele){
                var tempdata = JSON.parse(this.getAttribute("hrefInfor"));
                ele.href="detail.html?spgoods="+tempdata.ser_num+"=/";
            })
            $("#recBanner>ul>li>div.recPic>a").each(function(index,ele){
                var tempdata = JSON.parse(this.getAttribute("hrefInfor"));
                ele.href="detail.html?spgoods="+tempdata.ser_num+"=/";
            })
            $(".recRight>ul>li.recTag>div>a").each(function(index,ele){
                var tempdata = JSON.parse(this.getAttribute("hrefInfor"));
                // console.log(123);
                ele.href="detail.html?spgoods="+tempdata.ser_num+"=/";
            })




        }
    }
    $.ajax(json_data);



})